<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 引入YDUI样式 -->
    <link rel="stylesheet" href="../../ydui-0.1.3/build/css/ydui.css" />
    <!-- 引入YDUI自适应解决方案类库 -->
    <script src="../../ydui-0.1.3/build/js/ydui.flexible.js"></script>
    <style>
        .goIcon span{
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url('../../img/gwc/gwc-radio.png') no-repeat;
            background-size: contain;
        }
        .goIcon span.active{
            background: url('../../img/gwc/gwc-radio2.png') no-repeat;
            background-size: contain;
        }
    </style>
</head>
<body>

<header class="m-navbar">
    <a href="../index/index.html" class="navbar-item"><i class="back-ico"></i></a>
    <div class="navbar-center"><span class="navbar-title">华猫收银台</span></div>
</header>

    <!-- 使用：样式模块以按钮为例 -->
    <section class="g-flexview" id="app">

        <div>
            <div class="m-cell">
                <div class="cell-item">
                    <div class="cell-left">需付款</div>
                    <div class="cell-right">{{returnFloat(payMoney.totalMoney)}}</div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">订单号码</div>
                    <div class="cell-right">{{orderId}}</div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">商品合计</div>
                    <div class="cell-right">{{returnFloat(payMoney.totalMoney)}}</div>
                </div>
            </div>
        </div>


        <section class="g-scrollview">

            <div class="m-cell">

                <label class="cell-item" v-for=" (o,i) in account">
                    <div class="cell-left"><span class="cell-icon"><img :src="o.icon" /></span>{{o.title}}</div>
                    <label class="cell-right" @click="getPayMethod(o,i)">
                        <input type="radio" name="radio" />
                        <!--<i class="cell-checkbox-icon"></i>-->
                       <div class="goIcon">
                           <span :class="{'active':current==i}"></span>
                       </div>
                    </label>
                </label>
            </div>

            <div class="m-button demo-pitch">
                <a href="javascript:;" class="btn-block btn-danger" id="J_OpenKeyBoard">支付</a>
            </div>

            <div class="m-keyboard" id="J_KeyBoard">
                <!-- 自定义内容区域 -->
                <div style="text-align: right;padding: .15rem .8rem 0;"><a href="http://www.ydui.org" style="color: #666;font-size: .24rem;">忘记密码</a></div>
                <!-- 自定义内容区域 -->
            </div>

        </section>

    </section>
<!--!TODO 忘记密码，topbar 没有做完，后期补全 -->
<!-- 引入jQuery 2.0+ -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入YDUI脚本 -->
<script src="../../ydui-0.1.3/build/js/ydui.js"></script>

<script>
    $(function () {
        !function ($, ydui) {

            var dialog = ydui.dialog;

            var $keyboard = $('#J_KeyBoard');

            // 初始化参数
            $keyboard.keyBoard({
                disorder: false, // 是否打乱数字顺序
                title: 'HM安全键盘' // 显示标题
            });

            // 打开键盘
            $('#J_OpenKeyBoard').on('click', function () {
                $keyboard.keyBoard('open');
            });

            // 六位密码输入完毕后执行
            $keyboard.on('done.ydui.keyboard', function (ret) {

                console.log('输入的密码是：' + ret.password);

                // 弹出请求中提示框
                dialog.loading.open('验证支付密码');
                vm.checkPwd(ret.password);
                // 模拟AJAX校验密码
                // setTimeout(function () {
                //     // 关闭请求中提示框
                //     dialog.loading.close();
                //
                //     // 显示错误信息
                //     $keyboard.keyBoard('error', '对不起，您的支付密码不正确，请重新输入。');
                // }, 1500);

                // 关闭键盘
                // $keyboard.keyBoard('close');
            });

        }(jQuery, YDUI);


    })

</script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/vue-resource.min.js"></script>
<script src="../../js/aui-toast.js"> </script>
<script src="../../js/common.js"></script>
<script>
   // window.onload=function() {
        setToken()
        var vm = new Vue({
            el: '#app',
            data: {

                orderId: getUrlParam('list'),
                totalMoney: getUrlParam('totalMoney'),
                current: 1,//默认当前下表为0
                payMethod: '华猫支付',//默认华猫支付
                payStr: '',//支付密码
                payOrderMsg: {},
                payMoney:{},
                payType:'',
                account: [
                    {
                        icon: '../../img/huamao.png',
                        title: '华猫支付',
                        isCheck: 0,
                        payId:''
                    }, {
                        icon: '../../img/xianjin.png',
                        title: '现金支付',
                        isCheck: 1,
                        payId:'2'
                    }, {
                        icon: '../../img/huabao.png',
                        title: '华宝支付',
                        isCheck: 0,
                        payId:'3'
                    }, {
                        icon: '../../img/huokuan.png',
                        title: '华宝货款',
                        isCheck: 0,
                        payId:'6'
                    },{
                        icon: '../../img/huokuan.png',
                        title: '线下支付',
                        isCheck: 0,
                        payId:'1'
                    }
                ]
            },
            mounted: function () {
                this.$nextTick(function () {
                    this.pay();
                  //  this.checkPwd()
                })
            },
            computed: {

            },
            methods: {
                //点击获取支付方式
                getPayMethod: function (o, i) {
                    this.current = i;
                  //给当前的paytype赋值
                    this.payType=o.payId
                    // console.log(this.payType)
                    // console.log(this.account[this.current].payId)
                },
                //获取支付信息
                pay: function () {
                    this.$http.post(SURL + 'app/pay/checkstand', {
                        sceneCode: 'BUY_GOODS',
                        orderNo: this.orderId,
                        isBatch: getUrlParam('isBatch')
                    }, {emulateJSON: true}).then(function (res) {
                        //console.log(res)
                        if (res.body.status == 1) {
                            this.payOrderMsg = res.body.data;
                            this.payMoney=res.body.data.orderInfo
                        }
                    })


                },
                /*
                * "orderNo": 3,订单号
                    "payType": "2",支付方式 2 现金 3开元宝 6开元宝货款
                     "payPwd": "123456",支付密码
                    "isBatch": "1"是否是购物车进 1：购物车进
                *
                * */
                payOrder: function (p) {
                    var params={
                        orderNo:this.orderId,//订单编号
                        isBatch:getUrlParam('isBatch')//地址栏获取当前的是购物车or 立即购买状态
                    };
                    params=Object.assign(params,p);
                    this.$http.post(SURL+'app/orders/payCashKaiyuan',params,{emulateJSON:true}).then(function (res) {
                       YDUI .dialog.loading.close();
                        if(res.body.status==1){
                            YDUI.dialog.toast('支付成功！', 'success', 1000);
                            $('#J_KeyBoard').keyBoard('close');
                            setTimeout(function () {
                               // YDUI.dialog.loading.open('zhi');
                                location.href='../alliance/completionWG.html?payMsg='+encodeURI(JSON.stringify(res.body.data))
                            },1500)
                        }else{
                          //  $('#J_KeyBoard').keyBoard('error', '对不起，您的支付密码不正确，请重新输入。');
                            YDUI. dialog.toast(res.body.msg, 'none', 1000);
                        }
                    })
                },
                payMethods:function (m) {//n 支付方式，m 支付密码
                    this.payType=this.account[this.current].payId
                    var params={
                        payType:this.payType,
                        payPwd:m
                    };
                    this.payOrder(params)
                },
                //校验交易密码
                checkPwd:function (m) {
                    //field	密码类型 payPwd：交易密码 loginPwd：登录密码
                    this.$http.get(SURL+'app/user/checkPwd',{params:{password:m,field:'payPwd'}}).then(function (res) {
                     //  console.log(res)
                        YDUI .dialog.loading.close();
                        if(res.body.status=='1'){
                            this.payMethods(m)
                        }else{
                            $('#J_KeyBoard').keyBoard('error', '对不起，您的支付密码不正确，请重新输入。');
                        }
                    })
                }

            },
        })

   // }
</script>
</body>
</html>